<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>常用组件</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div id="lizhili">
			<!-- 主体 -->
			<div class="item-box">
				<div class="item">
					<img src="img/pic5.jpg" alt="...">
					<div class="desc">
						我就离开了家了进来看就离开
					</div>
				</div>
				<div class="item">
					<img src="img/pic2.jpg" alt="...">
					<div class="desc">
						我就离开了家了进来看就离开
					</div>
				</div>
				<div class="item">
					<img src="img/pic3.jpg" alt="...">
					<div class="desc">
						我就离开了家了进来看就离开
					</div>
				</div>
				<div class="item">
					<img src="img/pic4.jpg" alt="...">
					<div class="desc">
						我就离开了家了进来看就离开
					</div>
				</div>
			</div>
			<!-- 上一页,下一页 -->
			<div class="button">
				<a class="left" href="JavaScript:;">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				</a>
				<a class="right" href="JavaScript:;">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				</a>
			</div>
			<!-- 原点-->
			<ol class="di">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		
		<style>
			#lizhili{
				width: 500px;
				margin: 0 auto;
				
				box-sizing: content-box;
				overflow: hidden;
				position: relative;
			}
			.item-box{
				width: 99999px;
			}
			.item{
				width: 500px;
				float: left;
			}
			.item img{
				width: 100%;
			}
			.desc{
				background: #000;
				text-align: center;
				font-size: 18px;
				line-height: 2;
				color: white;
			}
			.button{
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items:center;
				font-size: 36px;
			}
			.di{
				position: absolute;
				bottom: 0;
			}
			.di li{
				display: inline-block;
				background: #00aa00;
				width: 10px;
				height: 10px;
				
			}
			.di li.active{
				background-color: white;
			}
		</style>


		<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="js/lizhili.js"></script>
		<script>
			$('#lizhili').slide({
				Time:3000,//滚动时间
			})
			
		</script>


	</body>
</html>
